<template>
	<view class="theme_bg_vice_color">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top" class="theme_bg_color">
				<cu-custom id="nav" :isBack="true" :backColor="'text-black'">
					<block slot="backText"><view class="text-black ">钻石卡</view></block>
				</cu-custom>
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view
							class="cu-item flex-sub"
							:class="index == TabCur ? 'text-orange cur' : ''"
							v-for="(item, index) in ['我的钻石卡', '购买钻石卡', '活动钻石卡']"
							:key="index"
							@click="tabSelect"
							:data-id="index"
						>
							{{ item }}
						</view>
					</view>
				</scroll-view>
				<view class="meun bg-white padding" v-show="TabCur === 1">
					<view class="padding-bottom-sm">
						<view class="text-bold padding-bottom-sm">
							剧本类型
							<text class="text-sm">(可多选)</text>
						</view>
						<van-checkbox-group :value="Selected.checkboxResult" direction="horizontal" @change="change">
							<view class="flex">
								<van-checkbox :name="item.id" v-for="(item, index) in ScriptType" :key="item.id" class="margin-left" shape="square" checked-color="#1f1f1f">
									{{ item.small_name }}
								</van-checkbox>
							</view>
						</van-checkbox-group>
					</view>

					<view class="padding-bottom-sm">
						<view class="text-bold padding-bottom-sm">购买次数</view>
						<van-radio-group :value="Selected.radioResult" direction="horizontal" @change="radioChange">
							<view class="flex">
								<van-radio :name="item.count" v-for="(item, index) in FrequencyType" :key="item.id" class="margin-left" checked-color="#1f1f1f">
									{{ item.count == -1 ? '无限' : item.count }}次
								</van-radio>
							</view>
						</van-radio-group>
					</view>
					<view class="flex align-center justify-between">
						<view class="text-bold padding-bottom-sm">选择商家</view>
						<van-search :value="search" placeholder="请输入搜索关键词" @search="searchBusiness" />
					</view>
				</view>
			</view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view class="list" v-if="TabCur === 0">
				<view class="zuanshika padding" v-for="(item, index) in dataList" :key="index">
					<view class="flex justify-between">
						<view class="flex align-center">
							<image src="../../../static/icon/zuanshi.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
							<text class="text-bold text-lg margin-left-xs">{{ item.name?item.name:'钻石卡' }}</text>
						</view>
						<view class="cu-tag round bg-brown" @click="$goPage('/pageB/me/DiamondCard/PurchasedBussinessList?id=' + item.userCarId)">去使用</view>
					</view> 
					<view class="flex justify-between padding-top">
						<view class="flex justify-start">
							<view>类型：</view>
							<view v-for="(item1, index1) in item.smallName" :key="index1" class="cu-tag round sm bg-yellow">{{ item1 }}</view>
						</view>
						<view>可玩商家：{{ item.storeCount }}</view>
					</view>
					<view class="flex justify-between padding-top">
						<view class="flex justify-start">
							<view>过期时间：</view>
							<view>{{ item.expiration_time }}</view>
						</view>
						<view>剩余次数：{{ item.count_surplus >= 0 ? item.count_surplus : '无限次' }}</view>
					</view>
				</view>
			</view>

			<view class="meun" v-if="TabCur === 1">
				<view class="padding-bottom-sm">
					<van-checkbox-group :value="Selected.selectBussiness" direction="horizontal" @change="changeBussiness">
						<van-cell-group>
							<van-cell v-for="(item, index) in dataList" :key="index" value-class="value-class" clickable :data-index="index" @click="toggle">
								<view slot="title">
									<view class=" margin-left-sm" style="width: 520rpx;">
										<view class="flex justify-between margin-top-xs">
											<view class="text-bold text-lg text-black">{{ item.storeName }}</view>
										</view>
										<view class="margin-top-sm text-gray text-sm">{{ item.region }}{{ item.address }}</view>
									</view>
								</view>
								<view slot="icon">
									<image :src="$isHttp(item.picture)" lazy-load style="width: 100rpx;height: 100rpx;border-radius: 10rpx;" mode="aspectFill"></image>
								</view>
								<van-checkbox :class="'checkboxes-' + index" :name="item.storeId" :data-index="index" checked-color="#1f1f1f" @tap="toggle" />
							</van-cell>
						</van-cell-group>
					</van-checkbox-group>
				</view>
			</view>

			<view class="list" v-if="TabCur == 2">
				<view class="zuanshika padding" v-for="(item, index) in dataList" :key="index">
					<view class="flex justify-between">
						<view class="flex align-center">
							<image src="../../../static/icon/zuanshi.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
							<text class="text-bold text-lg margin-left-xs">{{ item.name }}</text>
						</view>
						<view class="cu-tag round bg-brown" @click="buyActive(item.id)">去购买</view>
					</view>
					<view class="flex justify-between padding-top">
						<view class="flex justify-start">
							<view>类型：</view>
							<view v-for="(item1, index1) in item.playTypeName" :key="index1" class="cu-tag round sm bg-yellow">{{ item1.small_name }}</view>
						</view>
						<view class="">活动价：<text class="text-bold text-yellow">{{ item.price }}元</text></view>
					</view>
					<view class="flex justify-between padding-top">
						<view class="flex justify-start">
							<view>活动时间：</view>
							<view>{{ item.start_time.split(' ')[0] + ' - ' + item.end_time.split(' ')[0] }}</view>
						</view>
						
					</view>
					<view class="flex justify-between padding-top">
						<view class="flex justify-start">
							<view>可玩次数：</view>
							<view>{{ item.diamonds_count >= 0 ? item.diamonds_count : '无限次' }}</view>
						</view>
						<view>
							可玩商家：{{ item.storeCount == -1 ? '全城' : item.storeCount }}
							<text class="cu-tag round bg-grey margin-left-sm" @click="$goPage('/pageB/me/DiamondCard/PurchasedBussinessList?id2=' + item.id)">查看</text>
						</view>
					</view>
					<view class="flex justify-between padding-top">
						<view class="flex justify-start">
							<view>购买后：</view>
							<view>{{ item.day }}天失效</view>
						</view>
						<view>剩余张数：{{ item.count == null ? '无限' : item.count - item.buy_count }}</view>
					</view>
				</view>
			</view>

			<view slot="bottom">
				<view class="meun bg-white padding" v-show="TabCur === 1">
					<van-checkbox-group :value="Selected.city" @change="changeCity">
						<van-cell-group>
							<van-cell title="选择所有商家" value-class="value-class" clickable data-index="qwe" @click="toggle">
								<view slot="right-icon"><van-checkbox class="checkboxes-qwe" data-index="qwe" checked-color="#1f1f1f" :name="vuex_city" @tap="toggle" /></view>
							</van-cell>
						</van-cell-group>
					</van-checkbox-group>
					<view class="padding-bottom-sm flex justify-between align-center">
						<view class="text-bold text-lg">合计：{{ !isSelected ? '--' : jiage }}元</view>
						<view class="flex justify-start">
							<van-checkbox :value="isFu" @change="isFu=$event.detail" icon-size="15" checked-color="#1f1f1f"></van-checkbox><text class="text-xs" style="text-decoration:underline;color: 1f1f1f;" @click="$goPage('/pageB/me/DiamondCard/TermsService')">服务条款</text>
						</view>
						<button
							class="cu-btn round block lg text-sm"
							:class="{ 'bg-yellow': isSelected ? true : false, 'bg-grey': isSelected ? false : true }"
							style="width: 31%;"
							@click="buydiamondCar"
						>
							立即购买
						</button>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	data() {
		return {
			dataList: [],
			TabCur: 0,

			search: '',

			ScriptType: [],
			FrequencyType: [],
			
			isFu:false,
			
			Selected: {
				checkboxResult: [],
				radioResult: '',
				selectBussiness: [],
				city: []
			},
			jiage: '--'
		};
	},
	onLoad(option) {
		this.TabCur=option.TabCur?option.TabCur:0
		this.$u.api.getDiamondsService().then(res=>{
			this.fuVal=res.data.service
		})
		this.$u.api.diamondsWay().then(res => {
			if (res.code === 200) {
				this.ScriptType = res.data.smallClasses;
				this.FrequencyType = res.data.diamondsCounts;
			}
		});
	},
	computed: {
		isSelected: function() {
			return this.Selected.checkboxResult.length === 0 || (this.Selected.selectBussiness.length === 0 && this.Selected.city.length === 0) || this.Selected.radioResult == ''
				? false
				: true;
		}
	},
	watch: {
		Selected: {
			handler: function(newVal, oldVal) {
				console.log(newVal);
				if (!this.isSelected) {
					return;
				}
				this.$u.api
					.diamondMoney({
						arr: this.Selected.checkboxResult,
						storeId: this.Selected.selectBussiness,
						count: this.Selected.radioResult,
						city: this.Selected.city.length === 0 ? '' : this.Selected.city[0]
					})
					.then(res => {
						if (res.code === 200) {
							this.jiage = res.data;
						}
					});
			},
			deep: true
		}
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
			this.$refs.paging.reload();
		},
		searchBusiness(e) {
			this.search = e.detail;
			this.$refs.paging.reload();
		},
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			if (this.TabCur == 0) {
				this.$u.api
					.getUserCar({
						userId: this.vuex_user.id
					})
					.then(res => {
						this.$refs.paging.complete(res.data);
					});
			}
			if (this.TabCur == 1) {
				this.$u.api
					.getStoreCar({
						city: this.vuex_city,
						page: pageNo,
						number: pageSize,
						name: this.search
					})
					.then(res => {
						if (res.code === 200) {
							this.$refs.paging.complete(res.data);
						}
					});
			}
			if (this.TabCur == 2) {
				this.$u.api
					.getActiveDiamonds({
						city: this.vuex_city,
						page: pageNo,
						number: pageSize
					})
					.then(res => {
						if (res.code === 200) {
							this.$refs.paging.complete(res.data);
						}
					});
			}
		},
		buydiamondCar() {
			if (!this.isSelected) return;
			if(!this.isFu){
				this.$textToast('请勾选服务条款')
				return
			}
			this.$u.api
				.buydiamondCar({
					arr: this.Selected.checkboxResult,
					storeId: this.Selected.selectBussiness,
					count: this.Selected.radioResult,

					userId: this.vuex_user.id,
					payType: 1,
					city: this.Selected.city.length === 0 ? '' : this.Selected.city[0]
				})
				.then(res => {
					if (res.code === 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: 'prepay_id=' + res.data.prepayId,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: res1 => {
								console.log('success:' + JSON.stringify(res1));
								this.$successToast('购买成功');
								this.TabCur = 0;
								this.$refs.paging.reload();
							},
							fail: err => {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				});
		},
		buyActive(id) {
			this.$u.api
				.buyActive({
					activeId: id,
					userId: this.vuex_user.id,
					payType: 1
				})
				.then(res => {
					if (res.code === 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: 'prepay_id=' + res.data.prepayId,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: res1 => {
								console.log('success:' + JSON.stringify(res1));
								this.$successToast('购买成功');
								this.TabCur = 0;
								this.$refs.paging.reload();
							},
							fail: err => {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				});
		},
		toggle(e) {
			const { index } = e.currentTarget.dataset;
			const checkbox = this.selectComponent(`.checkboxes-${index}`);
			checkbox.toggle();
		},
		change(e) {
			this.Selected.checkboxResult = e.detail;
		},
		changeBussiness(e) {
			this.Selected.selectBussiness = e.detail;
		},
		changeCity(e) {
			this.Selected.city = e.detail;
		},
		radioChange(e) {
			console.log(e);
			this.Selected.radioResult = e.detail;
		}
	}
};
</script>

<style lang="scss" scoped>
.zuanshika {
	width: 690rpx;
	height: auto;
	background-image: linear-gradient(to right, #2a2a2c, #4e5052);
	margin: 20rpx auto;
	border-radius: 12rpx;
	color: #f8dab0;
}
.item {
	position: relative;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0rpx 30rpx;
}

.item-detail {
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: white;
	background-color: #007aff;
}

.item-line {
	position: absolute;
	bottom: 0rpx;
	left: 0rpx;
	height: 1px;
	width: 100%;
	background-color: #eeeeee;
}
</style>
